<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商账户：</span>
                <el-input placeholder="输入供应商账户" v-model.trim="account" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商名称：</span>
                <el-input placeholder="输入供应商名称" v-model.trim="supplier_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">时间区间：</span>
                <el-date-picker
                    v-model="area_time"
                    type="daterange"
                    unlink-panels
                    value-format="YYYY-MM-DD"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </div>
            <div class="task-one__btn task-wrap-btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button @click="clickExport">导出</el-button>
            </div>
        </div>

        <!-- <div class="table-mb">
            <el-button type="default" plain @click="clickBatch(1)">批量审核</el-button>
            <el-button type="default" plain @click="clickBatch(2)">批量发放</el-button>
        </div> -->
        <!-- handleAllSelected -->
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <!-- <el-table-column type="selection" width="55" fixed="left" /> -->
            <el-table-column label="供应商信息" min-width="240">
                <template #default="{ row }">
                    <p>{{ row.title }}[ID: {{ row.supplier_id }}]</p>
                    <p>{{ row.mobile }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="created_at_label" label="申请时间" width="160"></el-table-column>
            <el-table-column label="提现金额(元)" min-width="170">
                <template #default="{ row }">
                    <p>申请金额：{{ row.money }}</p>
                    <p>实际到账：{{ row.end_money }}</p>
                </template>
            </el-table-column>
            <el-table-column label="账号信息" min-width="340">
                <template #default="{ row }">
                    <p>账号：{{ row.account_number }}</p>
                    <p>账户：{{ row.account_info }}</p>
                </template>
            </el-table-column>
            <el-table-column label="提现状态" min-width="90">
                <template #default="{ row }">
                    <span style="color: #4b93fa">{{ status_labels[row.status] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="提现方式" min-width="80">
                <template #default="{ row }">
                    <span v-if="row.from === 'weixin'">微信</span>
                    <span v-else>{{ row.from === "bank" ? "银行卡" : "支付宝" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="intro" label="备注" min-width="220"></el-table-column>
            <el-table-column prop="reason" label="拒绝原因" min-width="220"></el-table-column>
            <el-table-column label="操作" width="170" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" class="theme-btn" @click="clickExam(row)" v-if="row.status == 0">审核</el-button>
                    <el-button link type="primary" class="theme-btn" @click="clickGrant(row)" v-if="row.status == 1">发放</el-button>
                    <el-button link type="primary" class="theme-btn" @click="clickReject(row)" v-if="row.status == 0 || row.status == 4">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 批量审核/发放 -->
        <el-dialog v-model="dialogBatch" :title="batch_type == 1 ? '批量审核' : '批量发放'" width="580px" :append-to-body="true" :destroy-on-close="true">
            <div class="el-table">
                <p class="tip-title">确认{{ batch_type == 1 ? "审核通过" : "发放" }}吗？</p>
                <p class="tip-text">*批量转账会有延迟，请与实际到账，核对无误后再发放。</p>
                <p class="tip-input">
                    <el-input v-model.trim="pub_remarks" type="textarea" clearable :rows="4" style="width: 460px" placeholder="请输入备注" />
                </p>
                <el-checkbox v-model="pub_checked" label="我已经确认对账，正确无误" />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmBatchExam">确认</el-button>
                    <el-button @click="dialogBatch = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 单个审核 -->
        <el-dialog v-model="dialogExam" title="提现审核" width="600px" :append-to-body="true" :destroy-on-close="true">
            <detail-item bottom="14px" title="申请日期" :value="itemObjs.created_at_label" value-weight="600" />
            <detail-item bottom="14px" title="申请金额" :value="itemObjs.money" price-icon value-weight="600" />
            <detail-item bottom="14px" title="实际金额" :value="itemObjs.end_money" price-icon value-weight="600" />
            <detail-item bottom="14px" title="收款人" :value="itemObjs.title" value-weight="600" />
            <detail-item bottom="14px" title="收款账号" :value="itemObjs.account_number" value-weight="600" />
            <!-- <detail-item bottom="14px" title="审核备注">
                <el-input v-model.trim="pub_remarks" type="textarea" clearable :rows="3" style="width: 400px" placeholder="请输入审核备注" />
            </detail-item> -->
            <detail-item bottom="14px" title="">
                <p class="el-table">
                    <el-checkbox v-model="pub_checked" label="我已经确认对账，正确无误" />
                </p>
            </detail-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmExam">确认</el-button>
                    <el-button @click="dialogExam = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 单个发放 -->
        <el-dialog v-model="dialogGrant" title="提现发放" width="600px" :append-to-body="true" :destroy-on-close="true">
            <detail-item bottom="14px" title="申请日期" :value="itemObjs.created_at_label" value-weight="600" />
            <detail-item bottom="14px" title="申请金额" :value="itemObjs.money" price-icon value-weight="600" />
            <detail-item bottom="14px" title="实际金额" :value="itemObjs.end_money" price-icon value-weight="600" />
            <detail-item bottom="14px" title="收款人" :value="itemObjs.title" value-weight="600" />
            <detail-item bottom="14px" title="收款账号" :value="itemObjs.account_number" value-weight="600" />
            <!-- <detail-item bottom="14px" title="发放备注">
                <el-input v-model.trim="pub_remarks" type="textarea" clearable :rows="3" style="width: 400px" placeholder="请输入发放备注" />
            </detail-item> -->
            <detail-item bottom="14px" title="">
                <p class="el-table">
                    <el-checkbox v-model="pub_checked" label="我已经确认对账，正确无误" />
                </p>
            </detail-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmGrant">确认</el-button>
                    <el-button @click="dialogGrant = false">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 驳回 -->
        <el-dialog v-model="dialogReject" title="申请驳回" width="600px" :append-to-body="true" :destroy-on-close="true" @close="closeReject">
            <detail-item bottom="6px" title-width="100px" title="驳回理由">
                <el-input v-model.trim="pub_remarks" type="textarea" clearable :rows="6" style="width: 380px" placeholder="请输入驳回理由" />
            </detail-item>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmReject">确认</el-button>
                    <el-button @click="closeReject">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRouter } from "vue-router"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"
import DetailItem from "@components/DetailItem.vue"

const router = useRouter()
const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

const status_labels = ["待审核", "待打款", "打款中", "打款完成", "打款关闭", "已拒绝"]
function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        supplier_id: supplier_id.value,
        so: supplier_name.value,
        account: account.value,
        s_time: area_time.value ? area_time.value[0] : "",
        l_time: area_time.value ? area_time.value[1] : "",
    }
    getdata("finance/apply/supplierApply", params)
}

/**
 * 搜索
 * @param {String} account 账户
 * @param {String} supplier_name 供应商名称
 * @param {String} supplier_id 供应商ID
 * @param {String} area_time 日期
 */
const supplier_name = ref("")
const account = ref("")
const supplier_id = ref("")
const area_time = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 导出
const clickExport = () => {
    proxy.$axios
        .get("finance/apply/supplierApplyExport", {
            params: {
                supplier_id: supplier_id.value,
                so: supplier_name.value,
                account: account.value,
                s_time: area_time.value ? area_time.value[0] : "",
                l_time: area_time.value ? area_time.value[1] : "",
            },
            responseType: "blob",
        })
        .then(function (res) {
            let contentDisposition = res.headers["content-disposition"]
            let filename = decodeURI(contentDisposition.split("fileName=")[1] || contentDisposition.split("filename=")[1])
            let blob = new Blob([res.data], { type: res.headers["content-type"] })
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement("a")
            link.href = url
            link.download = filename
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(url) // 释放内存
            document.body.removeChild(link)
        })
        .catch((err) => {})
}

// 公用字段
const form_loading = ref(false)
const itemObjs = ref({}) // item数据
const pub_remarks = ref("") // 备注

// 驳回
const dialogReject = ref(false)
const clickReject = (row) => {
    itemObjs.value = row
    dialogReject.value = true
}
const confirmReject = () => {
    if (!pub_remarks.value) {
        proxy.$message({ message: "请输入驳回理由", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("finance/apply/supplierReject", {
            tixian_id: itemObjs.value.tixian_id,
            reason: pub_remarks.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogReject.value = false
                proxy.$message({ message: "驳回成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const closeReject = () => {
    pub_remarks.value = ""
    dialogReject.value = false
}

// 单个发放
const dialogGrant = ref(false)
const clickGrant = (row) => {
    itemObjs.value = row
    pub_checked.value = false
    pub_remarks.value = ""
    dialogGrant.value = true
}
const confirmGrant = proxy.$util.throttle(() => {
    if (!pub_checked.value) {
        proxy.$message({ message: "请勾选并确认对账正确无误", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("finance/apply/supplierTransfer", {
            tixian_id: itemObjs.value.tixian_id,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogGrant.value = false
                proxy.$message({ message: "发放成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}, 500)

// 单个审核
const dialogExam = ref(false)
const clickExam = (row) => {
    itemObjs.value = row
    pub_checked.value = false
    pub_remarks.value = ""
    dialogExam.value = true
}
const confirmExam = () => {
    if (!pub_checked.value) {
        proxy.$message({ message: "请勾选并确认对账正确无误", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("finance/apply/supplierAudit", {
            tixian_id: itemObjs.value.tixian_id,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogExam.value = false
                proxy.$message({ message: "审核成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}

// 批量获取数据
const ids = ref([])
const handleAllSelected = (val) => {
    let arrs = []
    for (let i = 0; i < val.length; i++) {
        arrs.push(val[i].uid)
    }
    ids.value = arrs
}

/**
 * 批量审核和发放
 * @param {Boolean} pub_checked 公用复选框
 * @param {String} batch_type 1是批量审核弹窗，2是批量发放弹窗
 * @param {Function} clickBatch 点击批量审核
 * @param {String} nickname 昵称
 */
const pub_checked = ref(false)
const batch_type = ref("")
const dialogBatch = ref(false)
const clickBatch = (type) => {
    if (ids.value.length == 0) {
        proxy.$message({ message: `请选择要${type == 1 ? "审核" : "发放"}的数据`, type: "warning" })
        return
    }
    pub_remarks.value = ""
    pub_checked.value = false
    batch_type.value = type
    dialogBatch.value = true
}
const confirmBatchExam = () => {
    if (!pub_checked.value) {
        proxy.$message({ message: "请勾选并确认对账正确无误", type: "warning" })
        return
    }
    let url = batch_type.value == 1 ? "" : ""
    proxy.$axios
        .post(url, {
            uid: ids.value,
        })
        .then((res) => {
            if (res.data.code == 0) {
                dialogBatch.value = false
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}
</script>
<script>
export default {
    name: "SupplierCashOut",
}
</script>

<style lang="less" scoped>
.tip-title {
    font-size: @font-size-md;
    color: @gray-8;
    margin-bottom: @margin-sm;
}
.tip-text {
    font-size: @font-size-md;
    color: @red;
    margin-bottom: @margin-sm;
}
.tip-input {
    margin-bottom: @margin-xs;
}
</style>
